<template>
  <div class="dash-board-page">
    <div class="map-container" ref="myEchart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"
import "@/assets/map/js/china.js";
import "@/assets/map/json/china.json";

export default {

  data(){
    return {
      myEchart:''
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initEcharts()
    })
  },

  methods:{
    initEcharts(){
      this.myEchart = echarts.init(this.$refs.myEchart);
      let option = {    
        backgroundColor: 'transparent',
        title: {
          text: '', //显示标题
          left: 'center',
          textStyle: {
            fontSize: 14,
            color: '#333'
          }
        },
        series : [{
          type: 'map',
          map: 'china',
          label: {
            color: "#545454", //控制地区名的字体颜色
            fontSize: 10,
            show: false // 是否一直显示省名显示
          },
          itemStyle: {
              areaColor: "#fff", //设置地图背景色
              borderColor: "#33ccff", //设置地图边线颜色
          },
          // itemStyle: {
          //   color: '#f4e925',
          //   shadowBlur: 10,
          //   shadowColor: '#333'
          // },

          //控制鼠标滑过之后的背景色和字体颜色
          emphasis: {    
              label: {
                  color: "#000",
                  fontSize: 10,
              },
              itemStyle: {
                  areaColor: "#33ccff",
                  borderColor: "#33ccff",
              },
          },
          data:[
            {name: '北京',value: Math.round(Math.random()*1000)},
            {name: '天津',value: Math.round(Math.random()*1000)},
            {name: '上海',value: Math.round(Math.random()*1000)}                                    
          ]
        }]
      }
      this.myEchart.setOption(option);
    }
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.dash-board-page {
  height: 100%;
  .flex-start-center();

  .text{
    color: #044161;
  }

  .map-container{
    width: 80%;
    height: 80%;
  }
}
</style>